var directive = angular.module('CourseApp.directive', []);
directive.directive('stateLoadingIndicator', function($rootScope) {
    return {
      restrict: 'E',
      template: "<div ng-show='isStateLoading' class='loading-indicator'>" + "<div class='loading-indicator-body'>" + "<h3 class='loading-title'>Loading...</h3>" + "<div class='spinner'><chasing-dots-spinner></chasing-dots-spinner></div>" + "</div>" + "</div>",
      replace: true,
      link: function(scope, elem, attrs) {
        scope.isStateLoading = false;

        $rootScope.$on('$stateChangeStart', function() {
          scope.isStateLoading = true;
        });
        $rootScope.$on('$stateChangeSuccess', function() {
          scope.isStateLoading = false;
        });
      }
    };
  });

directive.directive('divider', function($rootScope) {
    return {
      restrict: 'AE',
      template: "<div style='height: 10px; background-color: #eee'></div>",
      replace: false
    };
  });

directive.directive('longline', function($rootScope) {
    return {
      restrict: 'AE',
      template: "<div style='height: 1px; background-color: #eee; width: 100%'></div>",
      replace: true
    };
  });

directive.directive('elastic', [
    '$timeout',
    function($timeout) {
      return {
        restrict: 'A',
        link: function($scope, element) {

          var resize = function() {
            var height = element[0].scrollHeight;
            if(height < 120){
              return element[0].style.height = 120 + "px";
            } else {
              return element[0].style.height = "" + element[0].scrollHeight + "px";
            }
          };
          element.on("blur keyup change", resize);
          $timeout(resize, 0);
        }
      };
    }
  ]);